<template>
  
      <div id="main">
        <div v-for="(item, index) in data" :key="index" class="t1" @click="decsid(item.id)">
            <img :src="item.imgsrc" :alt="item.desc">
            <p>{{ item.dec }}</p>
            <p class="t2"><b>{{ item.price }}</b></p>
        </div>
    </div>
</template>

<script>
import {test1} from '@/api/test'
export default {
   
      
            data: function () {
                return {
                    data: [
                    ]
                };
            },
            methods:{
getdata(){
    test1().then(res=>{
        this.data=res.rows
        console.log(res);

    })
},
decsid(id){
      console.log(id);
this.$router.push({name:'detial',params:{aid:id}})
}
            },
            mounted(){
    this.getdata()
}
        

}
</script>

<style scoped>
 #main{
    margin-top: 424px;
            width: 1564px;
            height: 800px;
            margin-left: 250px;
            
        }
        .t1{
            position: relative;
            margin-top: 15px;
            float: left;
            width: 244px;
            height:340px ;
           background-color: aliceblue;
           margin-right: 20px;
           transition: transform 0.3s ease-in-out;
             border: 2px solid transparent;
        }
     .t1:hover {
    transform: scale(1.1);
    border-color:red; 
}
        img{
            width: 244px;
            height: 237px;
        }
        .t2{
            font-size: 30px;
            position: absolute;
            color: rgb(177, 29, 29);
            font-family: 黑体;
            float: right;
           bottom: 3px;
        }
</style>